<template>
  <div class="classifyBox">
    <div class="topBox">
      <search></search>
    </div>
    <div class="contentBox">
      <van-sidebar :active-key="activeKey" @change="onChange">
        <van-sidebar-item v-for='(item,index) in tabsAry' :title="item.text" :key='index' @click=getData(item)></van-sidebar-item>
      </van-sidebar>
      <div class="slideContent">
        <div class="goodsBox">
          <van-card v-for='(item,index) in list' :key="index" :price="item.price" :centered='true' :desc="item.desc" :title="item.title" :thumb="item.img">
            <view slot="footer">
              <van-icon name="add" color="#c59ff3" size='20px' @click='add(item)' />
            </view>
          </van-card>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import search from "@/components/search";
import http from "@/utils/http.js";
export default {
  data() {
    return {
      tabsAry: [
        {
          id: "fruit",
          text: "时令水果"
        },
        {
          id: "vegetables",
          text: "新鲜蔬菜"
        },
        {
          id: "meat",
          text: "肉蛋熟食"
        },
        {
          id: "fish",
          text: "活鲜产品"
        },
        {
          id: "youx",
          text: "优鲜超市"
        },
        {
          id: "home",
          text: "在家火锅"
        },
        {
          id: "milk",
          text: "品质乳品"
        },
        {
          id: "foods",
          text: "悠闲食品"
        }
      ],
      imgs: [
        "https://j-image.missfresh.cn/img_20190528192621669.jpg",
        "https://j-image.missfresh.cn/img_20190524230020655.jpg",
        "https://j-image.missfresh.cn/img_20190522223030516.jpg",
        "https://j-image.missfresh.cn/img_20190523222548600.png"
      ],
      list: []
    };
  },

  components: {
    search
  },

  methods: {
    getData(item) {
      http.get("/classify", { type: item.id }).then(data => {
        console.log(data)
        this.list = data.data;
      });
    },
    add(item) {
      let list = getApp().globalData.cartList || [];
      wx.showToast({
        title: "添加成功",
        icon: "success",
        duration: 500
      });
      for (let i = 0; i < list.length; i++) {
        if (list[i].id == item.id) {
          ++list[i].count;
          return;
        }
      }
      item.isChecked = true;
      item.count = 1;
      list.push(item);
    }
  },

  created() {
    // let app = getApp()
    this.getData({ id: "fruit" });
  }
};
</script>

<style lang='less'>
.classifyBox {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  .topBox {
    height: 50px;
  }
  .contentBox {
    display: flex;
    flex: auto;
    .slideBar {
      .van-sidebar {
        width: var(--sidebar-width, 85px);
      }
      width: var(--sidebar-width, 85px);
    }
    .slideContent {
      flex: auto;
      background: #fff;
      height: 100%;
      overflow-y: scroll;
      .swiperBox {
        height: 100px;
        padding: 8px;
        box-sizing: border-box;
        swiper {
          border-radius: 10px;
          height: 100px;
          overflow: hidden;
        }
      }
      .van-card {
        background: #fff;
        border-bottom: 1rpx solid #eee;
      }
    }
  }
}
</style>
